<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 属性选择器 */

    /* 选择含有id选择器的全部元素 */
        div[id]{
            color: rgb(215, 51, 51);
        }

    /* 选择class以ico开头的全部元素 */
        div[class^=ico]{
            color: pink;
        }

    /* 选择class以dta结尾的全部元素 */
        div[class$=dta]{
            color: aqua;
        }

    /* 选择包含class包含w的全部元素 */
        div[class*=w]{
            color: rgb(0, 255, 13);
        }

    /* 绝对等于  这个和上面权重一样所以就近原则执行这个 */
        div[class=icon4]{
            font-weight: 700;
            color: rgb(16, 37, 220);
        }



        /* 结构选择器 */
      
    /* 选择ul里li第一个元素 */
        ul li:first-child{
            background-color: pink;
        }

    /* 选择ul里li最后一个元素 */
        ul li:last-child{
            background-color: blue;
        }
 
    /* 选择ul里li第三个元素 */
        ul li:nth-child(3){
            background-color: brown;
        }

    /* 选择ul里li第五个元素 */
        ul li:nth-child(5){
            background-color: brown;
        }
    /* 选择.ul里li为偶数的全部元素 */
        .uls li:nth-child(even){
            background-color: dodgerblue;
        }

    /* 选择.ul里li为奇数的全部元素 */
        .uls li:nth-child(odd){
            background-color:blanchedalmond;
        }

       /* nth-child(even/odd/n/2n/2n+1/5n/n+5/-n+5)
            even 偶数
            odd奇数
            2n 偶数
            2n+1 奇数 
            5n 5 10 15...
            n+5 从第五个开始
            -n+5 选择前五个 */


            /* -n+5 选择前五个 */
            ol li:nth-child(-n+5){
                background-color: darkkhaki;
            }
            /* n+5 从第五个开始 */
            ol li:nth-child(n+5){
                background-color:chartreuse;
            }
  
            /* 5n 5 10 15...  也就是n*5 n是从零开始 */
            ol li:nth-child(5n){
                background-color:rgb(59, 51, 204);
            }

            /* 用法一样  */
  /* nth-of-type  他是把指定类型排序 分别类型 如果里面有别的标签他只会把指定类型排序*/
  /* nth-child   他是把全部都排序    不分别类型*/


            /* nth-of-tyep(even/odd/n/2n/2n+1/5n/n+5/-n+5)
            even 偶数
            odd奇数
            2n 偶数
            2n+1 奇数 
            5n 5 10 15...
            n+5 从第五个开始
            -n+5 选择前五个 */

            
            section div:nth-of-type(odd){
                background-color: chartreuse;
            }

            section div:nth-of-type(even){
                background-color:gold;
            }
                  

            /* section div:nth-child(odd){
                background-color: chartreuse;
            } */

    </style>

</head>
<body>
    <div id="id">胡歌 </div>
    <div id="te">赵玉真</div>
  
    <div class="w1">1</div>
    <div class="w2">2</div>
    <div class="w3">3</div>

     
    <div class="icon1">1</div>
    <div class="icon2">2</div>
    <div class="icon3">3</div>
    <div class="icon4">4</div>
    <div class="icon5">5</div>

    <div class="us4-dta">彭于晏</div>
    <div class="us5-dta">韩立</div>
<hr>

    <ul>
        <li>胡歌</li>
        <li>彭于晏</li>
        <li>赵玉真</li>
        <li>小小怪</li>
        <li>韩立</li>
        <li>萧炎</li>
        <li>谢怜</li>
    </ul>


    <ul class="uls">
        <li>1韩立</li>
        <li>2萧炎</li>
        <li>3谢怜</li>
        <li>4胡歌</li>
        <li>5彭于晏</li>
        <li>6赵玉真</li>
        <li>7小小怪</li>
    </ul>

<hr>
    <ol>
        <li>1韩立</li>
        <li>2萧炎</li>
        <li>3谢怜</li>
        <li>4胡歌</li>
        <li>5彭于晏</li>
        <li>6赵玉真</li>
        <li>7小小怪</li>
    </ol>

<hr>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
        <div>吉吉国王</div>
        <div>毛毛</div>
    </section>

</body>
</html>